<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <title>Document</title>
</head>
<body>
    <!--axios拦截器：用来全局拦截 axios 的每一次请求与响应，可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性 -->
    <h1>axios请求拦截器</h1>
    <button id="btn">发送请求</button>
    <script>
        
        const axios1 = axios.create({
            baseURL:'/',//配置公共路径
            timeout:10000,//配置超时时间
            headers:{}//配置请求头
        })

        // 请求拦截器 一般是做权限管理，检验请求的客户端是否有token（令牌）
        /* 
         use方法接受两个回调函数,正常都会进入到第一个回调函数中
        只有以下两种情况会触发异常处理的回调(了解):
            - use额外配置第三个参数options
            - 当同时设置多个同类型拦截器的时候,如果第二个拦截器中的处理出现错误,则会执行第一个拦截器中的异常处理函数
        
    */
        axios1.interceptors.request.use((config)=>{
        // 因为要对拦截到的数据做处理，所以要先拿到拦截到的东西，拦截到的数据在形参上可以接收到
            console.log(config)//这个参数拿到的就是axios的配置对象
            /*
            adapter: ƒ (e)
            baseURL: "/"
            env: {FormData: null}
            headers: {common: {…}, delete: {…}, get: {…}, head: {…}, post: {…}, …}
            maxBodyLength: -1
            maxContentLength: -1
            method: "get"
            params: {userId: '001'}
            timeout: 10000
            transformRequest: [ƒ]
            transformResponse: [ƒ]
            transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
            url: "/user"
            validateStatus: ƒ (e)
            xsrfCookieName: "XSRF-TOKEN"
            xsrfHeaderName: "X-XSRF-TOKEN"
            
            */
           //1.在发送请求之前做些什么
            alert('1')
            return(config)//如果不把config返回出去（放行），就会出现axios发送请求报错，
            //如果没写return(config)，config.headers.common是请求头的配置
            // 写了return(config)，config.headers是请求头的配置
        },(err)=>{//请求拦截器很难进入处理异常的回调函数中，
           //2，对请求错误做些什么
            return Promise.reject(err.message)
        })

        const btn =document.querySelector('#btn')
        btn.onclick = async function(){
           try{
            const re = await axios1.get('/user',{
                params:{
                    userId: "001"
                }
            })

           } catch(e){
            console.log(e)
           }
            
        }
    </script>



</body>
</html>